<!DOCTYPE html>
<html>
<head>
    <title>PINECMS 后台管理系统 - 登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8"/>

    <link rel="icon" type="image/ico" href="{{.staticDir}}/images/favicon.ico"/>
    <!-- Bootstrap -->
    <link href="{{.staticDir}}/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{.staticDir}}/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{.staticDir}}/css/animate.min.css">
    <link rel="stylesheet" href="{{.staticDir}}/css/bootstrap-checkbox.css">

    <link href="{{.staticDir}}/css/minoral.css" rel="stylesheet">

</head>
<body class="brownish-scheme">

<!-- Preloader -->
<div class="mask">
    <div id="loader"></div>
</div>
<!--/Preloader -->

<!-- Wrap all page content here -->
<div id="wrap">
    <!-- Make page fluid -->
    <div class="row">
        <!-- Page content -->
        <div id="content" class="col-md-12 full-page login">
            <div class="welcome" style="background-color: rgba(255,255,255, 0.7); padding: 30px;">
                <img src="{{.staticDir}}/images/new_logo.png" alt class="logo" style="width: 100%;">

                <form id="form-signin" class="form-signin">
                    <section>
                        <div class="input-group">
                            <input type="text" class="form-control" name="username" id="username"
                                   placeholder="Username">
                            <div class="input-group-addon"><i class="fa fa-user"></i></div>
                        </div>
                        <div class="input-group">
                            <input type="password" class="form-control" name="password" id="password"
                                   placeholder="Password">
                            <div class="input-group-addon"><i class="fa fa-key"></i></div>
                        </div>
                        <div class="input-group">
                            <input type="text" id="codeid" name="code" class="form-control" placeholder="Captcha">
                            <div class="input-group-addon">
                                <img src="{{.staticDir}}/images/logincode.png" style="height: 20px;" id="code_img" alt="点击刷新"
                                     onclick="changeCode()">
                            </div>
                        </div>
                        <div class="alert alert-red" id="errmsg" style="display: none"></div>
                    </section>

                    <section class="new-acc">
                        <button class="btn btn-greensea" onclick="return checkform();">Login to PineCMS</button>
                    </section>
                </form>
            </div>


        </div>
        <!-- Page content end -->


    </div>
    <!-- Make page fluid-->


</div>
<!-- Wrap all page content end -->

<script src="{{.staticDir}}/js/jquery.js"></script>
<script src="{{.staticDir}}/js/bootstrap.min.js"></script>
<script src="{{.staticDir}}/js/plugins/jquery.nicescroll.min.js"></script>
<script src="{{.staticDir}}/js/minoral.min.js"></script>

<script>
    var showCpt = false;
    $(function () {
        $('.welcome').addClass('animated bounceIn');
        $('#username, #password, #codeid').focus(function () {
            $("#errmsg").hide();
        })
        $("#codeid").focus(function () {
            if (!showCpt) changeCode()
        })
    })

    function checkform() {
        if ($('#username').val() === '') {
            $('#username').focus();
            return false;
        }
        if ($('#password').val() === '') {
            $('#password').focus();
            return false;
        }
        if ($('#codeid').val() === '') {
            $('#codeid').focus();
            return false;
        }
        $.post('/b/login/index', $("#form-signin").serialize(), function (data) {
            if (data.errcode) {
                $("#errmsg").html(data.errmsg).show();
                changeCode();
            } else {
                window.location.href = "/b/index/index";
            }
        }, 'json');
        return false;
    }

    function changeCode() {
        showCpt = true;
        document.getElementById('code_img').src = "/public/verify-code?" + Math.random();
    }
</script>
</body>
</html>